﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Web截屏控件2演示界面</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="zyCapture/skygqbox.css" />
    <script type="text/javascript" src="zyCapture/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="zyCapture/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="xheditor-1.1.13/xheditor-1.1.13-zh-cn.min.js"></script>
    <script type="text/javascript" src="zyCapture/skygqbox.js"></script>
    <script type="text/javascript" src="zyCapture/scp.js" charset="utf-8"></script>
	<script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
    <style type="text/css">
		.zycapture{background: transparent url(zyCapture/scp.png) no-repeat; background-position:3px 2px;}
	</style>
</head>
<body>
    <p>泽优全平台截屏解决方案(zyCapture)</p>    
	<div id="xhe">
        <xheditor ref="xhe"></xheditor>
    </div>
    <script>
        Vue.component('xheditor', {
            data() {
                return {
                    editor: null, scp: null
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted() {
                //根路径：http://localhost/api/scp/
                var pos = window.location.href.lastIndexOf("/");
                var api = [
                    window.location.href.substr(0, pos + 1),
                    "upload.php"
                ].join("");

                var ref = this;
                this.scp = zyCapture.getInstance({
                    config: {
                        PostUrl: api,
                        Fields: { uname: "test" }
                    },
                    event: {
                        hotKey: function () {
                            setTimeout(function () {
                                ref.scp.Capture2();
                            }, 100);
                        },
                        postComplete: function (url) {
                            var img = '<img src="' + url + "?t=" + new Date().getTime() + '"/>';
                            ref.editor.appendHTML(img);
                        }
                    }                    
                });

                var edt;
                $(pageInit);
                function pageInit() {
                    var allPlugin = {
                        zycapture: { c: 'zycapture', t: '截屏', e: function () { ref.scp.Capture(); } }
                    };
                    edt = $('#editor').xheditor({ plugins: allPlugin, tools: 'zycapture,Source,Fullscreen,About' });
                    ref.editor = edt;
                }
            },
            methods: {},
            destroyed() { },
            template: '<div><textarea id="editor" name="editor" rows="12" cols="80" style="width:860px;height:180px;"/></div>'
        });

        var xhe = new Vue({
            el: '#xhe',
            data: {
            }
            , mounted: function () {
                //注册事件
                window.scpMgr = this.$refs.xhe.scp;
            }
        });
    </script>
</body>
</html>